<template>
  <m-list-construction title="项目偏好管理">
    <template slot="content">
      <div class="m-bg">
        <el-switch
          v-model="active"
          active-color="#33317e"
          inactive-color="#e9e9e9"
        >
        </el-switch>
        <span style="color: 333333;font-weight: 600;margin-left: 10px;">{{ active?'启用':'未启用' }}</span>
        <div class="careTip">
          <span style="margin-left: 10px;">下面这些项目偏好配置将影响这个项目下的所有工作流和任务。当创建工作流和任务时，这些配置将影响组件中的默认选项</span>
        </div>
        <div class="line"></div>
        <task-form :isActive="active"></task-form>
      </div>
    </template>
  </m-list-construction>
</template>
<script>

  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import taskForm from './components/taskForm.vue'

  export default {
    name: 'orderList',
    data () {
      return {
        active: false
      }
    },
    methods: {
    },
    beforeDestroy () {
      sessionStorage.setItem('isLeft', 1)
    },
    components: { mListConstruction, taskForm }
  }
</script>

<style lang="scss" scoped>
.m-bg {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: calc(100vh - 150px);
  .careTip {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #f27011;
    line-height: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(242, 112, 17, 0.1);
    border: 0.5px solid rgba(242, 112, 17, 0.5);
  }
  .line {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  ::v-deep .el-switch__core {
    border-radius: 3px !important;
    &::after {
      border-radius: 2px !important;
      // background-color: #f5f5f5;
    }
  }
}
</style>
